import React from 'react';
import { Space, Spin } from 'antd';
import { useRequest } from 'ahooks';
import styles from '../styles/index.less';
import MapContainer from '@/components/MapContainer';
import IntervalCard from '@/components/MarketingMap/IntervalCard';
import MaskLoad from '@/components/MarketingMap/MaskLoad';
import Sidebar from '@/components/MarketingMap/Sidebar';
import TopFilterForm from '@/components/MarketingMap/TopFilterForm';
import useForm from '@/components/MarketingMap/TopFilterForm/useForm';
import { fetchMapAll } from '@/services/marketingMap/overallAnalysis';
import OverallContext from '../context';
import StatisticsOverview from './StatisticsOverview';
import UserProfile from './UserProfile';
import useMap from './useMap';
import usePermissionCheck from '@/hooks/usePermissionCheck';
import { connect } from 'dva';
import { colors } from '@/utils/marketingMap/utils';

const OverallAnalysis: React.FC<any> = ({ form, isAuth }) => {
  const { loading: isLoading, date, options, initialValue, query, codeNameMap, onSubmit } = form;

  const { data, loading } = useRequest(() => fetchMapAll(query), {
    refreshDeps: [JSON.stringify(query)],
    // loadingDelay: 300,
  });
  const { status, map, markerClick, onRenderingCompleted } = useMap(data, query.areaRange, isAuth);

  const provider = {
    date,
    query,
    codeNameMap,
    onSubmit,
  };

  return (
    <OverallContext.Provider value={provider}>
      <div className={styles.wrapper}>
        <div className={styles.top_wrap}>
          <TopFilterForm
            defaultValue={initialValue}
            value={query}
            onSubmit={onSubmit}
            options={options || {}}
            auth="overall-screen"
          />
        </div>
        <Sidebar
          items={[
            { key: '1', label: '统计概况', children: <StatisticsOverview isAuth={isAuth} data={data?.[2]} /> },
            { key: '2', label: '用户画像', children: <UserProfile map={map} markerClick={markerClick} /> },
          ]}
        />
        {(loading || isLoading) && <MaskLoad />}
        {status ? (
          !!data?.[0]?.length && (
            <div className={styles.interval_card}>
              <IntervalCard
                max={Math.max(...data[0].map((item: { vehicleCount: any }) => item.vehicleCount))}
              />
            </div>
          )
        ) : (
          <div className={styles.lattice_card}>
            <Space style={{ userSelect: 'none' }} size={6} direction="vertical">
              <Space size={12}>
                <div style={{ height: 8, width: 8, borderRadius: 2, background: colors[0] }}></div>
                <span>仅回本店售后 </span>
              </Space>
              <Space size={12}>
                <div style={{ height: 8, width: 8, borderRadius: 2, background: colors[1] }}></div>
                <span>回本店和其他售后店</span>
              </Space>
              <Space size={12}>
                <div style={{ height: 8, width: 8, borderRadius: 2, background: colors[2] }}></div>
                <span>仅在其他店售后</span>
              </Space>
              <Space size={12}>
                <div style={{ height: 8, width: 8, borderRadius: 2, background: colors[3] }}></div>
                <span>未回厂售后</span>
              </Space>
              <span>注：颜色越深代表用户密度越大</span>
            </Space>
          </div>
        )}
        <MapContainer plugins={['AMap.HeatMap']} onRenderingCompleted={onRenderingCompleted} />
      </div>
    </OverallContext.Provider>
  );
};

export default connect(({ menu, loading }: any) => ({
  permissions: menu.permissions,
  loading: loading.models.menu,
}))(({ permissions, loading }: any) => {
  const [isAuth] = usePermissionCheck(permissions, 'overall-screen');
  const form = useForm(isAuth, loading);

  return form.state ? (
    <div style={{ display: 'flex', justifyContent: 'center', padding: 24 }}>
      <Spin />
    </div>
  ) : (
    <OverallAnalysis isAuth={isAuth} form={form} />
  );
});
